<template>
  <panel title="网点维修工单">
    <el-form class="form-horizontal" :rules="repairFormRule" :model="repairOrderDto" label-width="150px"
             ref="repairForm">
      <el-form-item label="服务类型" prop="serviceType">
        <el-select placeholder="请选择服务类型" v-model="repairOrderDto.serviceType" :disabled="true">
          <el-option v-for="item in serviceTypeOptions" :key="item.id" :value="item.id" :label="item.name">
            {{item.name}}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="故障类型" prop="faultType">
        <el-select v-model="repairOrderDto.faultType" placeholder="请选择故障类型" @change="onFaultTypeChange"
                   :disabled="true">
          <el-option v-for="item in faultTypeOptions" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="故障现象" prop="faultAppearance">
        <el-select v-model="repairOrderDto.faultAppearance" placeholder="请选择故障现象" :disabled="true">
          <el-option
            v-for="item in faultAppearanceOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用户是否同意维修" prop="isRepair"
                    v-if="repairOrderDto.serviceType === 1 || repairOrderDto.faultType === 3">
        <el-radio-group v-model="repairOrderDto.isRepair" :disabled="true">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="repairOrderDto.isRepair == 0">
        <el-form-item label="是否用料" prop="isMaterial" v-if="repairOrderDto.faultType === 3">
          <el-radio-group v-model="repairOrderDto.isMaterial" :disabled="true">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="故障处理" prop="faultTreatment" v-if="repairOrderDto.faultTypeId !== 4">
          <el-select v-model="repairOrderDto.faultTreatment" placeholder="请选择故障处理方式" :disabled="true">
            <el-option
              v-for="item in repairTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="合计金额" prop="totalPrice"
                      v-if="repairOrderDto.serviceType == 1 || (repairOrderDto.serviceType == 0 && repairOrderDto.faultTypeId == 3)">
          <el-input v-model="repairOrderDto.totalPrice" auto-complete="off" :disabled="true">
            <template slot="append" :disabled="true">元</template>
          </el-input>
        </el-form-item>

        <el-form-item v-if="repairOrderDto.faultTreatment == '更换部件'"
                      v-for="(material, index) in repairOrderDto.replacePartSubRequestList"
                      :key="index"
                      :label="'物料' + index"
                      :prop="repairOrderDto.replacePartSubRequestList[index].value">
          <el-select v-model="material.materielName" size="small"
                     style="width:35%;" filterable :disabled="true">
            <el-option
              v-for="item in materialList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-input v-model.trim="material.price" size="small" auto-complete="off" disable="true" style="width:30%;"
                    :disabled="true">
            <template slot="append">元</template>
          </el-input>
          <el-input-number placeholder="数量" :min="1" :max="50" size="small" v-model="material.num" auto-complete="off"
                           style="width:25%;" :disabled="true">
          </el-input-number>

        </el-form-item>


        <div v-if="repairOrderDto.faultTreatmentId == 1 || repairOrderDto.faultTreatmentId == 9">
          <el-form-item label="备机YSTSN" prop="ystsn">
            <el-row>
              <el-col :span="20">
                <el-input v-model="repairOrderDto.newYstsn" auto-complete="off" :disabled="true"></el-input>
              </el-col>
            </el-row>

          </el-form-item>
          <el-form-item label="备机型号" prop="model">
            <el-select v-model.number="repairOrderDto.newModelId" placeholder="请选择型号" :disabled="true">
              <el-option
                v-for="item in changeModelOptions"
                :key="item.id"
                :label="item.code"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合计金额" prop="totalPrice"
                        v-if="repairOrderDto.serviceType === 1 || repairOrderDto.faultType === 3">
            <el-input v-model="repairOrderDto.totalPrice" auto-complete="off" :disabled="true">
              <template slot="append" :disabled="true">元</template>
            </el-input>
          </el-form-item>
        </div>

        <el-form-item label="是否付款" prop="isPayment"
                      v-if="repairOrderDto.serviceType === 1 || repairOrderDto.faultType === 3">
          <el-radio-group v-model="repairOrderDto.isPayment" :disabled="true">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-if="repairOrderDto.isPayment == 0">
          <el-form-item label="是否开发票" prop="isInvoice"
                        v-if="repairOrderDto.serviceType === 1 || repairOrderDto.faultType === 3">
            <el-radio-group v-model="repairOrderDto.isInvoice" :disabled="true">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="发票类型" prop="invoiceType" v-if="repairOrderDto.isInvoice == 0 ">
            <el-select v-model="repairOrderDto.invoiceType" placeholder="请选择发票类型" :disabled="true">
              <el-option
                v-for="item in invoiceTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开户单位名称" v-if="repairOrderDto.isInvoice == 0 ">
            <el-input v-model.trim="repairOrderDto.companyName" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="税号" v-if="repairOrderDto.isInvoice == 0 ">
            <el-input v-model.trim="repairOrderDto.taxNumber" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="电话" v-if="repairOrderDto.isInvoice == 0 ">
            <el-input v-model.trim="repairOrderDto.tel" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="开户行" v-if="repairOrderDto.isInvoice == 0 ">
            <el-input v-model.trim="repairOrderDto.depositBank" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="开户账号" v-if="repairOrderDto.isInvoice == 0 ">
            <el-input v-model.trim="repairOrderDto.account" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>
        </div>
      </div>

      <!--<el-input v-model.trim="totalPrice"  auto-complete="off"  disable="true" style="width:30%;" v-if="repairOrderDto.faultType === 1 || repairOrderDto.faultType === 2">>-->
      <!--<template slot="append">元</template>-->
      <!--</el-input>-->

      <el-form-item label="维修人" prop="repairer">
        <el-input v-model.trim="repairOrderDto.repairer" auto-complete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="维修结果" prop="repairStatus">
        <el-select :disabled="true" v-model="repairOrderDto.repairStatus" placeholder="维修结果">
          <el-option
            v-for="item in repairStatusOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="onBtnReturn" style="float: right;">返回</el-button>
    </el-form>
  </panel>
</template>

<script>
  import Panel from '@/components/common/Panel'
  import {apiGetRepairDetail} from '@/api/stock/index'
  import {apiGetFaultTypeList, apiGetFaultAppearanceList, apiGetMaterielList, apiGetModelList} from '@/api/dictionary'
  import router from '@/router/index'
  import ElOption from '../../../../node_modules/element-ui/packages/select/src/option.vue'

  export default {
    components: {
      ElOption,
      Panel
    },
    created() {
      let listQuery = {
        type: this.$route.query.type,
        id: this.$route.query.id
      }
      this.getFactoryRepairDetail(listQuery)
      this.selectFaultTypeInit()
    },
    data() {
      return {
        repairOrderDto: {
          faultTypeId: '',
          applicationId: undefined,
          serviceType: '',
          faultAppearance: '',
          faultType: '',
          isMaterial: '',
          isRepair: '',
          faultTreatment: '',
          faultTreatmentId: undefined,
          newYstsn: '',
          productId: '',
          newModelId: '',
          repairStatus: '',
          repairer: '',
          isPayment: '',
          isInvoice: '',
          replacePartSubRequestList: [{
            materielId: '',
            price: '',
            num: undefined,
            materielName: ''
          }],
          totalPrice: undefined,
          invoiceType: undefined,
          companyName: '',
          taxNumber: '',
          tel: '',
          depositBank: '',
          account: ''
        },
        repairFormVisible: true,
        serviceTypeOptions: this.getServiceType(),
        repairStatusOptions: [
          {id: 1, name: '待修复'},
          {id: 2, name: '已修复'},
          {id: 3, name: '原物返还'},
          {id: 7, name: '返厂'}
        ],
        faultAppearanceOptions: [],
        faultTypeOptions: [],
        repairTypeOptions: [],
        repairFormRule: {},
        pagination: this.getData(this.getAcceptOrderList),
        invoiceTypeOptions: this.getInvoiceType(),
        materialList: [],
        changeModelOptions: this.selectedModelInit()
      }
    },
    methods: {
      // 物料选择初始化
      repairSubmit() {
        this.$refs['repairForm'].validate((valid) => {
          if (valid) {
            this.repairOrderDto.applicationId = this.nextId
            apiAddRepair(this.repairOrderDto).then(response => {
              var that = this
              var _type = response.resCode === '200' ? 'success' : 'error'
              this.$message({
                showClose: true,
                message: response.message,
                type: _type
              })
              this.cancel('repairForm', 3)
            })
          } else {
            return false
          }
        })
      },
      onFaultTypeChange(type) {
        this.repairOrderDto.faultType = type
        this.selectFaultAppearanceInit()
        if (type === 1 || type === 3) {                               // 硬件故障
          this.repairOrderDto.isMateriel = 0       // 用料
          this.repairTypeOptions = this.hardwareRepairType   // 硬件故障处理方式
          this.repairOrderDto.faultTreatment = ''
          this.selectMaterielInit()
        } else if (type === 2 || type === 4) {     // 软件故障
          this.repairOrderDto.isMateriel = 1   // 不用料
          this.repairTypeOptions = this.softwareRepairType // 软件故障处理方式
          this.repairOrderDto.faultTreatment = ''
        } else {
          this.repairOrderDto.faultTreatment = ''
        }
      },
      selectFaultAppearanceInit() {
        apiGetFaultAppearanceList().then(response => {
          let faultAppearanceList = response.data
          let faultAppearance = []
          let temp = {}
          for (let i in faultAppearanceList) {
            if (!temp[faultAppearanceList[i].name]) {
              temp[faultAppearanceList[i].name] = faultAppearanceList[i].id
            }
          }
          for (let k in temp) {
            faultAppearance.push({'name': k, 'id': temp[k]})
          }
          this.faultAppearanceOptions = faultAppearance
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      // 故障类型选择初始化
      selectFaultTypeInit() {
        apiGetFaultTypeList().then(response => {
          let faultTypeList = response.data
          let faultType = []
          let temp = {}
          for (let i in faultTypeList) {
            if (!temp[faultTypeList[i].name]) {
              temp[faultTypeList[i].name] = faultTypeList[i].id
            }
          }
          for (let k in temp) {
            faultType.push({'name': k, 'id': temp[k]})
          }
          this.faultTypeOptions = faultType
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      getFactoryList(listQuery) {
        apiGetFactoryList(listQuery).then(response => {
          this.factoryList = response.data
        }).catch(() => {
          this.$message({showClose: true, message: '获取生产工厂列表失败', type: 'error'})
        })
      },
      paymentChange() {
        if (this.repairOrderDto.isPayment === 1) {  // 不同意支付
          this.repairOrderDto.repairStatus = 1     // 原物返还
        } else {
          this.repairOrderDto.repairStatus = ''
        }
      },
      getFactoryRepairDetail(listQuery) {
        // TODO 获取库存一览表
        this.tableLoadingFlag = true
        apiGetRepairDetail(listQuery).then(response => {
          this.repairOrderDto = response.data
          if (response.data.isInvoice !== undefined) {
            let isInvoice = parseInt(response.data.isInvoice)
            this.repairOrderDto.isInvoice = isInvoice
          }
          if (response.data.isPayment !== undefined) {
            let isPayment = parseInt(response.data.isPayment)
            this.repairOrderDto.isPayment = isPayment
          }
          if (response.data.isRepair !== undefined) {
            let isRepair = parseInt(response.data.isRepair)
            this.repairOrderDto.isRepair = isRepair
          }
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      onBtnReturn() {
        // 物流信息录入界面
        router.go(-1)
      },
      selectedModelInit() {
        apiGetModelList().then(response => {
          let modelList = response.data
          let model = []
          let temp = {}
          for (let i in modelList) {
            if (!temp[modelList[i].code]) {
              temp[modelList[i].code] = modelList[i].id
            }
          }
          model.push({'code': '全部型号', 'value': ''})
          for (let k in temp) {
            model.push({'code': k, 'id': temp[k]})
          }
          this.changeModelOptions = model
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      addDomain() {
        var _that = this
        if (this.repairOrderDto.replacePartSubRequestList.length >= 8) {
          _that.$message({showClose: true, message: '最多添加8项告警参数', type: 'error'});
        } else {
          this.repairOrderDto.replacePartSubRequestList.push({
            materielId: '',
            price: '',
            num: 1
          })
        }
      },
      selectMateriel() {
        this.repairOrderDto.faultTreatment = ''
        if (0 === this.repairOrderDto.isMaterial) {
          this.repairTypeOptions = this.hardwareRepairType
          this.selectMaterielInit()
        } else {
          this.repairTypeOptions = this.softwareRepairType
        }
      },
      selectMaterielInit() {
        apiGetMaterielList().then(response => {
          let materielList = response.data
          let materiel = []
          let temp = {}
          for (let i in materielList) {
            if (!temp[materielList[i].name]) {
              temp[materielList[i].name] = materielList[i].id
            }
          }
          for (let k in temp) {
            materiel.push({'name': k, 'id': temp[k]})
          }
          this.materielOptions = materiel
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      isRepairChange() {
        if (this.repairOrderDto.isRepair == 1) {
          this.repairOrderDto.repairStatus = 3     // 原物返还
        } else {
          this.repairOrderDto.repairStatus = ''
        }
      }
    }
  }
</script>
